{% extends "../../_basic.twig" %}

{% block header %}
    <script src="../../../src/aum-scroll/index.js?v={{random()}}"></script>
    <link rel="stylesheet" href="../../../src/aum-scroll/index.css?v={{random()}}">
    <style>
    aum-scroll.picker {
        height: 173px;
        overflow: hidden;
        font-size: 20px;
    }
    aum-scroll.picker > .wheel-scroll {
        padding: 0;
        margin-top: 68px;
        line-height: 36px;
        list-style: none;
    }
    aum-scroll.picker > .wheel-scroll > .wheel-item {
        list-style: none;
        height: 36px;
        overflow: hidden;
        white-space: nowrap;
        color: #333;
    }
    </style>
{% endblock %}

{% block body %}
    <div>      
    <h3>picker</h3>
<aum-scroll class="picker" id="a">
    {% for i in 0..10 %}
    <div class="wheel-item"> {{i}} row</div>            
    {% endfor %}
</aum-scroll>
    </div>
    <script src="./index.js?v={{random()}}"></script>
{% endblock %}
